<template>
  <div
    class="w-96 h-40 bg-white p-3 ml-3 mt-3 transition hover:shadow-md"
    @click="clickCard()"
  >
    <div class="flex flex-col" v-if="!isNewCard">
      <div class="text-lg antialiased font-bold overflow-ellipsis">
        {{ showCardTitle }}
      </div>
      <div class="text-gray-600 text-sm font-medium mt-1">
        共 {{ cardGroupNum }} 张卡片
      </div>
      <div class="mt-16">{{ this.$store.state.info.userInfo.username }}</div>
    </div>
    <div v-else class="text-xl text mt-14">点击这里新建卡片组！</div>
  </div>
</template>

<style>
.el-card__header {
  padding: 13px;
}
.text {
  text-align: center;
}
</style>
<script>
import axios from "axios";
export default {
  props: {
    showEdit: Boolean,
    cardGroupUid: Number,
    isNewCard: Boolean,
    showCardTitle: String,
  },
  data() {
    return {
      cardGroupTitle: "N/A",
      cardGroupNum: -1,
      cardGroupCreate: "N/A",
    };
  }
  ,
  mounted() {
    axios
      .post("/api/getCardCount", {
        groupID: this.cardGroupUid,
      })
      .then((res) => {
        var data = res.data;
        this.cardGroupNum = data.cardCount;
      });
  },
  methods: {
    clickCard() {
      if (this.isNewCard) {
        this.$router.push({
          path: "/flipcard/createGroup",
        });
      } else {
        this.$router.push({
          path: `/flipcard/cardPlay`,
          query: { uid: this.cardGroupUid },
        });
      }
    },
  },
};
</script>